<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas1" width="200" height="100" style="border:1px solid black"></canvas>
    <canvas id="myCanvas2" width="200" height="100" style="border:1px solid black"></canvas>
    <canvas id="myCanvas3" width="200" height="100" style="border:1px solid black"></canvas>


    <script>
        var c1 = document.getElementById("myCanvas1");
        var c2 = document.getElementById("myCanvas2");
        var c3 = document.getElementById("myCanvas3");


        var ctx1 = c1.getContext("2d");
        var ctx2 = c2.getContext("2d");
        var ctx3 = c3.getContext("2d");
        // 线条

        ctx1.moveTo(0, 0);
        ctx1.lineTo(200, 100);
        ctx1.strokeStyle = "#cccccc"
        ctx1.stroke();

        //空心 矩形 

        ctx2.strokeStyle = "#ff9900";
        ctx2.strokeRect(30, 15, 100, 30)
        ctx2.strokeRect(30, 55, 100, 30)


        //实心 矩形 
        ctx2.fillStyle = "#ff9900";
        ctx2.fillRect(80, 55, 10, 10)

        ctx2.fillRect(100, 55, 10, 10)



        ctx3.arc(100, 50, 30, 0, 2 * Math.PI)
        ctx3.fillStyle = "#ff9900" //填充颜色
        ctx3.fill(); //  实心



        // 文字

        ctx3.font = "20px 黑体";
        ctx3.fillStyle = "#000000" //填充颜色
        ctx3.fillText("Hello World", 10, 50)

        ctx3.font = "30px Arial";
        ctx3.strokeText("Hello World", 10, 70);





    </script>
</body>

</html>